<template>
    <div class="xtx-city" ref="cityview">
      <div class="select" @click="toggle" :class="{ active: showpanel }">
        <span class="placeholder">
          {{ fullCityData.proname }}
          {{ fullCityData.cityname }}
          {{ fullCityData.couname }}
        </span>
        <span class="value"></span>
        <i class="iconfont icon-angle-down"></i>
      </div>
      <!-- v-if="active" -->
      <div class="option" v-show="showpanel">
        <span
          class="ellipsis"
          v-for="(item, key) in list"
          :key="key"
          @click="setData(item)"
        >
          {{ item.name }}
        </span>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    props: ["fullCityData"],
    data() {
      return {
        showpanel: false, //是否展示面板
        arealist: [],
        dataobj: {
          procode: null,
          proname: null,
          citycode: null,
          cityname: null,
          coucode: null,
          couname: null,
        },
      };
    },
  
    mounted() {
      document.addEventListener("click", (e) => {
        //获取城市组件的dom元素
        var obj = this.$refs.cityview;
        if (!obj.contains(e.target)) {
          this.close();
        }
      });
    },
  
    methods: {
      //展开
      open() {
        this.showpanel = true;
        this.getData();
        //并且制空
        this.dataobj = {
          procode: null,
          proname: null,
          citycode: null,
          cityname: null,
          coucode: null,
          couname: null,
        };
      },
      //关闭
      close() {
        this.showpanel = false;
      },
      //切换
      toggle() {
        //判断啥时候需要展开和关闭
        if (this.showpanel) {
          this.close();
        } else {
          this.open();
        }
      },
      //获取城市组件的数据
      async getData() {
        //数据不是直接拿  在执行方法的时候可以先判断缓存中是否又数据又直接返回没有用axios请求
        if (window.area) {
          this.arealist = window.area;
        } else {
          let url =
            "https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json";
          let res = await axios.get(url);
          //拿到数据写入缓存
          window.area = res.data;
          this.arealist = res.data;
        }
      },
      //设置选中的数据
      setData(item) {
        if (item.level == 0) {
          this.dataobj.procode = item.code;
          this.dataobj.proname = item.name;
        }
        if (item.level == 1) {
          this.dataobj.citycode = item.code;
          this.dataobj.cityname = item.name;
        }
        if (item.level == 2) {
          this.dataobj.coucode = item.code;
          this.dataobj.couname = item.name;
          this.close();
          //将收集的数据返回给父组件
          this.$emit("setFullData", this.dataobj);
        }
      },
    },
    computed: {
      list() {
        let arr = [];
        //默认的展示省份
        arr = this.arealist;
        //什么时候展示市区
        if (this.dataobj.procode != null) {
          //根据省份id找到当前对象
          let obj = this.arealist.find((item) => {
            return item.code == this.dataobj.procode;
          });
          arr = obj.areaList;
        }
        //什么时候展示县
        if (this.dataobj.citycode != null) {
          let couobj = arr.find((item) => {
            return item.code == this.dataobj.citycode;
          });
          arr = couobj.areaList;
        }
        return arr;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .xtx-city {
    margin-left: 10px;
    display: inline-block;
    position: relative;
    z-index: 400;
    .select {
      border: 1px solid #e4e4e4;
      height: 30px;
      padding: 0 5px;
      line-height: 28px;
      cursor: pointer;
      &.active {
        background: #fff;
      }
      .placeholder {
        color: #999;
      }
      .value {
        color: #666;
        font-size: 12px;
      }
      i {
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .option {
      width: 542px;
      border: 1px solid #e4e4e4;
      position: absolute;
      left: 0;
      top: 29px;
      background: #fff;
      min-height: 30px;
      line-height: 30px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      > span {
        width: 130px;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 3px;
        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }
  </style>